<template>
  <div>
    <el-dialog
      ref="refDlg"
      title="日常评估记录详情"
      :visible.sync="dialogShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="clearForm"
      width="800px"
      @close="closeDialog"
    >
      <!-- <div> -->

      <div>
        <el-table
          v-loading="tableLoading"
          element-loading-text="加载中"
          :data="tableData"
          :span-method="objectSpanMethod"
          border
          highlight-current-row
          :header-cell-style="{background:'#F6F6F6', borderRight:'1px solid #EBEEF5'}"
          style="width: 100%; margin-top: 20px"
        >
          <el-table-column prop="scoreType" label="考核类别" min-width="100" />
          <el-table-column prop="totalScore" label="考核总分" min-width="100" />
          <el-table-column prop="scoreDesc" label="考核说明" show-overflow-tooltip min-width="100" />
          <el-table-column prop="validStartTime" label="评分有效开始时间" min-width="120" />
          <el-table-column prop="validEndTime" label="评分有效截止日期" min-width="120" />
          <el-table-column prop="detailItem" label="考核明细项目" min-width="250" />
          <el-table-column prop="grading" label="评分标准" min-width="150" />
          <el-table-column prop="scoreDesc" label="评分说明" show-overflow-tooltip min-width="150" />
          <el-table-column prop="actualScore" label="实际得分" min-width="100" />
          <!-- <el-table-column prop="usePosition" label="评估日期" min-width="150" :formatter="formatUsePosition" /> -->
        </el-table>
        <!-- </div> -->
      </div>
      <div slot="footer">
        <el-button size="mini" @click="closeDialog">返回</el-button>
        <!-- <el-button size="mini" type="primary" @click="submitForm">保存</el-button> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { queryDailyRecord } from '@/api/constructionUnitMng'
export default {
  name: 'DailyRecordDetail',
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    detailData: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {
      queryObj: {},
      tableData: [],
      tableLoading: false
    }
  },
  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  created() {
    this.queryObj = this.detailData.data
    const formData = new FormData()
    const otherFilter = [{ 'id': 'assessRecordId', 'property': 'assessRecordId', 'operator': '=', 'value': this.queryObj.id }]
    formData.append('filtersRaw', JSON.stringify(otherFilter))
    queryDailyRecord(formData).then(res => {
      if (res.success && res.data && res.data.length) {
        const arr = []
        res.data.forEach(row => {
          if (row.assessDetailsDtos && row.assessDetailsDtos.length) {
            row.assessDetailsDtos.forEach((item, index) => {
              item.scoreType = row.scoreType
              item.totalScore = row.totalScore
              item.scoreDesc = row.scoreDesc
              item.validStartTime = row.validStartTime.split(' ')[0]
              item.validEndTime = row.validEndTime.split(' ')[0]
              item.actualScore = row.actualScore
              if (index === 0) {
                item.spanIndex = row.assessDetailsDtos.length
              }
              arr.push(item)
            })
          }
        })
        this.tableData = arr
      }
      this.tableLoading = false
    })
  },
  activated() {},
  methods: {
    /**
     * 表格合并
     * @param {*} param0
     * row 表格每一行的数据
     * column 表格每一列的数据
     * rowIndex 表格的行索引,不包括表头,从0开始
     * columnIndex 表格的列索引,从0开始
     */
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex <= 4 || columnIndex === 8) {
        // 过滤需要合并的行数
        if (row.spanIndex) {
          // 若rowIndex存在，则合并
          return {
            rowspan: row.spanIndex,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },
    // 关闭弹窗
    closeDialog() {
      this.dialogShow = false
      this.clearForm()
    },
    // 关闭弹窗前的回调
    clearForm(done) {
      this.queryObj = {
        id: null
      }
      this.$refs.refForm && this.$refs.refForm.clearValidate()
      done && done()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
